const path = require('path');

//启动热更新的 第2步, 导入已安装的webpack
const webpack = require('webpack');

//引入插件
//作用：1、使用插件之后不需要手动链接 bundle.js文件
// 使用插件之后， 自动引用内存中的html页面
const htmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');


module.exports = {
    entry: path.join(__dirname,'./src/main.js'),//需要打包的文件 入口
    output:{
        path: path.join(__dirname,'./dist'),//打包之后 输出到文件夹
        filename: 'bundle.js' //打包好之后 生产的文件名
    },
    devServer:{
        open: 'chrome',
        // port: 5210,
        contentBase: 'src',
        hot: true //热更新【只需要更新用户更改的内容】-- 启动热个小第1步
    },
    plugins:[//配置插件的节点
        new webpack.HotModuleReplacementPlugin(), //启动更新 第 3 步
        new htmlWebpackPlugin({
            template: path.join(__dirname,'./src/index.html'),//需要创建的html模板路径
            filename:'index.html'  //在内存中创建的HTML页面
        }),
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {test:/\.css$/, use:['style-loader','css-loader']}, //ues 中加载器执行的顺序，右往左执行，先执行css-loader 在执行style-loader
            {test:/\.less$/, use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/, use:['style-loader','css-loader','sass-loader']},
            //limit 限制，限定 --用于指定图片大小，[name]表示获取背景图片的名称，[ext] 获取背景图片的后缀名，[hash:5]表示5位哈希编码
            {test:/\.(jpg|png|gif|jpeg|bmp)/,use:'url-loader?esModule=false&limit=249771&name=[hash:3]-[name].[ext]'},
            {test:/\.(ttf|svg|dot|woff|woff2|font|ttc|eot)/,use:'url-loader'},
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//exclude:/node_modules/ 表示排除node_modules文件夹中.js文件
            {test:/\.vue$/,use:'vue-loader'}
        ]
    },
    resolve:{
        alias:{//修改 vue导入的文件
            "vue$": "vue/dist/vue.js"
        }
    }
}